<!DOCTYPE html>
<html lang="CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>心苑</title>
</head>
<style>
    *{
    margin:0;
    padding:0;
}
body{
    background-color:rgb(255,255,255);
    background-image: url('image/body_backpicture.png');
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
}





.top{
    position:relative;
    overflow: hidden;
    height:70px;
    width: 1010px;
    margin:0px auto 0px auto;
    overflow: auto;
    background:rgba(40, 115,180, 0.4);
}
.top .x_logo{
    float: left;
    overflow: hidden;
    margin-left: 10px;
    margin-top:10px;
    height:50px;
    width:50px;
    background-image: url('image/logo.png');
    background-size: cover; 
}
.top .x_slogan{
    float: left;
    overflow: hidden;
    height:50px;
    font:normal bold 36px '宋体';
    color:rgb(255,255,255);
    line-height: 70px;
    text-indent: 1em;
}
.top .x_titleall{
    overflow: hidden;
    float: right;
    height:70px;
    color:rgb(255,255,255);
}
.top .x_titleall .x_titlecn{
    overflow: hidden;
    margin:10px auto 0px auto;
    font:normal bold 30px '宋体';
    color:rgb(255,255,255);
    text-align: center;
}
.top .x_titleall .x_titleen{
    overflow: hidden;
    margin:0px 0px 15px auto;
    font:normal bold 10px '宋体';
    color:rgb(255,255,255);
}





.mainone{
    position:relative;
    height:680px;
    width: 1010px;
    margin:20px auto 20px auto;
    background-color:rgb(245,245,245);
}
.mainone .theme{
    position: relative;
    background:rgba(7, 7, 7, 0.3);
    height:50px;
    width: 1010px;
    margin:0px 0px 5px 0px;
    color:rgb(255,255,255);
}
.mainone .theme a{
    display: inline-block;
    position: relative;
    height:50px;
    padding: 0 20px 0 20px;
    font:normal bold 24px '宋体';
    color:rgb(255,255,255);
    text-decoration: none;
    line-height: 50px;
}
.mainone .theme a:hover{
    background-color:rgba(7, 7, 7, 0.5);
}




.mainone .pic{
    float:left;
    background-color: rgb(255, 255, 255);
    height:300px;
    width: 240px;
    margin:5px 10px 5px 10px;
}
.x_pic{
    width:100%;
    height:200px;
}
.symptom{
    font-size: 12px;
    margin:5px;
}
.name{
    float:left;
    bottom: 5px;
    display: block;
    width: 240px;
    font:normal bold 24px '宋体';
    color:black;
    text-decoration: none;
    text-align: center;
}
.name:hover{
    color: orange;
}
.mainone .pic2{
    float:left;
    background-color: rgb(255, 255, 255);
    height:300px;
    width: 240px;
    margin:5px 10px 5px 0px;
}
.x_last{
    float:left;
    height:300px;
    width: 240px;
    margin:5px 10px 5px 0px;
}
.x_last a{
    float:left;
    display: block;
    width: 240px;
    font:normal bold 24px '宋体';
    color:black;
    text-decoration: none;
    text-align: right;
    line-height:550px ;
}
.x_last a:hover{
    color: orange;
}




.maintwo{
    position:relative;
    height:450px;
    width: 1010px;
    margin:20px auto;
}
/* 轮播图父盒子!!!!!!!!!!!!!!!!!!!!! */
.maintwo .rollpicture{
    position:absolute;
    height:450px;
    width: 600px;
}
.rollpicture img{
    width: 100%;
    height: 100%;
}
/* 问答区父盒子！！！！！！！！！！！！！！！！！！ */
.maintwo .q_a{
    position:absolute;
    left:610px;
    top:-20px;
    background-color: rgb(255, 255, 255);
    height:450px;
    width: 400px;
    margin:20px auto;
}
.maintwo .q_a .head{
    position: relative;
    background:rgba(7, 7, 7, 0.3);
    height:50px;
    width:  400px;
    margin:0px 0px 0px 0px;
}

.maintwo .q_a .head h1{
    position: relative;
    height:50px;
    padding: 0 20px 0 20px;
    font:normal bold 24px '宋体';
    color:rgb(255,255,255);
    line-height: 50px;
}

.maintwo .q_a .question{
    overflow:auto;
    margin:5px 0px 5px 0px;
    width:  400px;
    height:370px;
    background:rgb(245,245,245);
}

.maintwo .q_a .question .block{
    overflow:hidden;
    box-sizing:border-box;
    height: 60px;
    margin:5px 5px 5px 5px;
    padding:7px 7px 7px 7px;
    background:rgb(255,255,255);    
}

.maintwo .q_a .question .block a{
    color:black;
    font:bold  20px '宋体';
    text-decoration: none;
}

.maintwo .q_a .question .block :hover{
    background:rgb(202, 212, 243);
}

.maintwo .q_a .more{
    text-align: right;
    width:400px;
    margin:0px 5px 5px 0px;
}

.maintwo .q_a .more a{
    text-decoration: none;
    color:black;
}

.maintwo .q_a .more  :hover{
    background:rgb(202, 212, 243);
}




.bottomlan{
    position:relative;
    background:rgba(7, 7, 7, 0.5);
    height:50px;
    width: 1010px;
    margin:20px auto 0px auto;
    font:normal bold 24px '宋体';
    color:rgb(255,255,255);
    line-height: 50px;
    text-align: center;
}
</style>
<body>
     <!-- 头部盒子 -->
    <div class='top'>
        <!-- logo盒子 -->
        <div class='x_logo'>
        </div>
        <!-- 标语盒子 -->
        <div class='x_slogan'>
            与心灵相约,与健康同行
        </div>
        <div class="x_titleall">
            <p class="x_titlecn">心理健康科普网</p>
            <p class="x_titleen">Mental health science popularization network</p>
        </div>
    </div>
    <!-- 常见心理疾病介绍 -->
    <div class='mainone'>
        <!-- 标题 -->
        <div class='theme'>
            <a href='#introduction'>常见心理疾病介绍</a>
            <a href='https://www.zhuanboke.cn/12289.html' target='block'>心理健康知识</a>
            <a href='http://www.apesk.com/xinliceshi/' target='block'>心理测试</a>
            <a href='https://www.baidu.com/' target='block'>心理咨询</a>
        </div>
        <!-- 图片 -->
        <div class='pic' id='introduction'>
            <img class='x_pic' src='image/depress.png'>
            <p class="symptom">症状：连续且长期的心情低落，从一开始的闷闷不乐逐渐到痛苦，悲观，厌世。患者患有躯体化症状。例如胸闷，气短等</p>
            <a class="name" 
            href="https://baike.baidu.com/item/%E6%8A%91%E9%83%81%E7%97%87/90924" 
            target="block">抑郁症</a>
        </div>
        <div class='pic2'>
            <img class='x_pic' src='image/anxiety.png'>
            <p class="symptom">症状：无明确客观对象的紧张担心，坐立不安，还有植物神经功能失调症状，如心悸、手抖、出汗、尿频等，及运动性不安</p>
            <a class="name" 
            href="https://baike.baidu.com/item/%E7%84%A6%E8%99%91%E7%97%87" 
            target="block">焦虑症</a>
        </div>
        <div class='pic2'>
            <img class='x_pic' src='image/frighten.png'>
            <p class="symptom">症状：对某些特定的对象或处境产生强烈和不必要的恐惧焦虑情绪，并趋于采取回避的方式来解除这种不安</p>
            <a class="name" 
            href="https://baike.baidu.com/item/%E6%81%90%E6%80%96%E7%97%87/1226130?fr=aladdin" 
            target="block">恐怖症</a>
        </div>
        <div class='pic2'>
            <img class='x_pic' src='image/neurasthenia.png'>
            <p class="symptom">症状：乏力和容易疲劳。注意力难于集中，失眠，记忆不佳，常忘事，进行脑力或体力活动稍久即感疲乏，对刺激过度敏感</p>
            <a class="name" 
            href="https://baike.baidu.com/item/%E7%A5%9E%E7%BB%8F%E8%A1%B0%E5%BC%B1/870664?fr=aladdin" 
            target="block">神经衰弱</a>
        </div>
        <div class='pic'>
            <img class='x_pic' src='image/anorexia.png'>
            <p class="symptom">症状：以强烈害怕体重增加和发胖为特点的对体重和体型的极度关注，盲目追求苗条，常有营养不良、代谢和内分泌紊乱</p>
            <a class="name" 
            href="https://baike.baidu.com/item/%E7%A5%9E%E7%BB%8F%E6%80%A7%E5%8E%8C%E9%A3%9F/5319012?fromtitle=%E7%A5%9E%E7%BB%8F%E6%80%A7%E5%8E%8C%E9%A3%9F%E7%97%87&fromid=4670616&fr=aladdin" 
            target="block">神经性厌食症</a>
        </div>
        <div class='pic2'>
            <img class='x_pic' src='image/schizophrenia.png'>
            <p class="symptom">症状：临床上往往表现为症状各异的综合征，涉及感知觉、思维、情感和行为等多方面的障碍以及精神活动的不协调</p>
            <a class="name" 
            href="https://baike.baidu.com/item/%E7%B2%BE%E7%A5%9E%E5%88%86%E8%A3%82%E7%97%87/33032?fr=aladdin" 
            target="block">精神分裂症</a>
        </div>
        <div class='pic2'>
            <img class='x_pic' src='image/BD.png'>
            <p class="symptom">症状：情绪低落或者高涨、反复交替的同时，伴有注意力分散、轻率、夸大、思维奔逸、高反应性、睡眠减少和言语增多等症状</p>
            <a class="name" 
            href="https://baike.baidu.com/item/%E5%8F%8C%E7%9B%B8%E9%9A%9C%E7%A2%8D/10771426?fr=aladdin" 
            target="block">双相情感障碍</a>
        </div>
        <div class='x_last'><a href="#">查看更多>></a></div>
    </div>
    <!-- ---------------------------------------------------------------------------------------------- -->
    <!-- 匿名问答区+轮播图 -->
    <div class='maintwo'>
        <!-- 轮播图 -->
        <div class='rollpicture'>
            <img src='image/000.png'>
        </div>
        <!-- 问答区 -->
        <div class='q_a'>
            <div class="head">
                <h1>心情互助站</h1>
              </div>
              <div class="question">
                  <div class="block">
                      <a target='block'   href='https://zhuanlan.zhihu.com/p/345704497' > 怎样才能迅速治愈伤心</a>
                  </div>
                  <div class="block">
                      <a target='block'  href='https://zhuanlan.zhihu.com/p/345704497' >心理测验结果不佳，就说明我心理有病吗？</a>
                  </div>
                  <div class="block">
                      <a target='block'  href='https://zhuanlan.zhihu.com/p/345704497'>学心理学就能治好自己的心病吗？</a>
                  </div>
                  <div class="block">
                      <a target='block'   href='https://zhuanlan.zhihu.com/p/345704497' > 为什么我没有朋友，也没人懂我？</a>
                  </div>
                  <div class="block">
                      <a target='block'  href='https://www.uoowu.com/xinwen/2193542.html' >遇到心理问题该如何求助 自己遇到心理问题怎样求助</a>
                  </div>
                  <div class="block">
                      <a target='block'  href='https://zhuanlan.zhihu.com/p/345704497' >我的性格好不好？</a>
                  </div>
                  <div class="block">
                      <a target='block'  href='https://www.zhihu.com/question/327345548' >如果出现心理健康问题，寻求帮助的途径有哪些？</a>
                  </div>
                              
              </div>
              <div class="more">
               <a target="block" href="https://www.baidu.com/">查看更多</a>
              </div>
        </div>
    </div>
    <!-- 底部栏 -->
    <div class='bottomlan'>找不到队制作，非商业用途
    </div>
</body>
</html>